import { useNavigate } from 'react-router-dom';
import { useGameStore } from '../store/gameStore';
import { ArrowLeft, Volume2, VolumeX, Monitor, Maximize, Grid3X3, Route } from 'lucide-react';

export default function Settings() {
  const navigate = useNavigate();
  const { settings, updateSettings } = useGameStore();

  const handleVolumeChange = (type: 'masterVolume' | 'sfxVolume' | 'musicVolume', value: number) => {
    updateSettings({ [type]: value });
  };

  const handleQualityChange = (quality: 'low' | 'medium' | 'high') => {
    updateSettings({ quality });
  };

  const handleToggleSetting = (setting: 'fullscreen' | 'showGrid' | 'showPath') => {
    updateSettings({ [setting]: !settings[setting] });
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-amber-50 to-amber-100">
      {/* 背景装饰 */}
      <div className="absolute inset-0 opacity-10">
        <div className="w-full h-full bg-[url('')] bg-repeat"></div>
      </div>

      {/* 顶部导航 */}
      <div className="relative z-10 p-6">
        <div className="flex items-center justify-between">
          <button
            onClick={() => navigate('/')}
            className="flex items-center gap-2 px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors"
          >
            <ArrowLeft className="w-5 h-5" />
            返回主菜单
          </button>
          
          <h1 className="text-4xl font-bold text-amber-900 text-center flex-1">
            游戏设置
          </h1>
          
          <div className="w-32"></div> {/* 占位符保持居中 */}
        </div>
      </div>

      {/* 设置内容 */}
      <div className="relative z-10 max-w-4xl mx-auto px-6 pb-6">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* 音频设置 */}
          <div className="bg-gradient-to-br from-amber-100 to-amber-200 rounded-lg p-6 border-2 border-amber-600">
            <h2 className="text-2xl font-bold text-amber-900 mb-6 flex items-center gap-2">
              <Volume2 className="w-6 h-6" />
              音频设置
            </h2>
            
            <div className="space-y-6">
              {/* 主音量 */}
              <div>
                <label className="block text-amber-800 font-medium mb-2">
                  主音量: {Math.round(settings.masterVolume * 100)}%
                </label>
                <div className="flex items-center gap-3">
                  <VolumeX className="w-5 h-5 text-amber-700" />
                  <input
                    type="range"
                    min="0"
                    max="1"
                    step="0.1"
                    value={settings.masterVolume}
                    onChange={(e) => handleVolumeChange('masterVolume', parseFloat(e.target.value))}
                    className="flex-1 h-2 bg-amber-300 rounded-lg appearance-none cursor-pointer"
                  />
                  <Volume2 className="w-5 h-5 text-amber-700" />
                </div>
              </div>

              {/* 音效音量 */}
              <div>
                <label className="block text-amber-800 font-medium mb-2">
                  音效音量: {Math.round(settings.sfxVolume * 100)}%
                </label>
                <div className="flex items-center gap-3">
                  <VolumeX className="w-5 h-5 text-amber-700" />
                  <input
                    type="range"
                    min="0"
                    max="1"
                    step="0.1"
                    value={settings.sfxVolume}
                    onChange={(e) => handleVolumeChange('sfxVolume', parseFloat(e.target.value))}
                    className="flex-1 h-2 bg-amber-300 rounded-lg appearance-none cursor-pointer"
                  />
                  <Volume2 className="w-5 h-5 text-amber-700" />
                </div>
              </div>

              {/* 音乐音量 */}
              <div>
                <label className="block text-amber-800 font-medium mb-2">
                  音乐音量: {Math.round(settings.musicVolume * 100)}%
                </label>
                <div className="flex items-center gap-3">
                  <VolumeX className="w-5 h-5 text-amber-700" />
                  <input
                    type="range"
                    min="0"
                    max="1"
                    step="0.1"
                    value={settings.musicVolume}
                    onChange={(e) => handleVolumeChange('musicVolume', parseFloat(e.target.value))}
                    className="flex-1 h-2 bg-amber-300 rounded-lg appearance-none cursor-pointer"
                  />
                  <Volume2 className="w-5 h-5 text-amber-700" />
                </div>
              </div>
            </div>
          </div>

          {/* 显示设置 */}
          <div className="bg-gradient-to-br from-amber-100 to-amber-200 rounded-lg p-6 border-2 border-amber-600">
            <h2 className="text-2xl font-bold text-amber-900 mb-6 flex items-center gap-2">
              <Monitor className="w-6 h-6" />
              显示设置
            </h2>
            
            <div className="space-y-6">
              {/* 画质设置 */}
              <div>
                <label className="block text-amber-800 font-medium mb-3">
                  画质设置
                </label>
                <div className="flex gap-2">
                  {(['low', 'medium', 'high'] as const).map((quality) => (
                    <button
                      key={quality}
                      onClick={() => handleQualityChange(quality)}
                      className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                        settings.quality === quality
                          ? 'bg-amber-600 text-white'
                          : 'bg-amber-300 text-amber-800 hover:bg-amber-400'
                      }`}
                    >
                      {quality === 'low' ? '低' : quality === 'medium' ? '中' : '高'}
                    </button>
                  ))}
                </div>
              </div>

              {/* 全屏模式 */}
              <div className="flex items-center justify-between">
                <label className="text-amber-800 font-medium flex items-center gap-2">
                  <Maximize className="w-5 h-5" />
                  全屏模式
                </label>
                <button
                  onClick={() => handleToggleSetting('fullscreen')}
                  className={`w-12 h-6 rounded-full transition-colors relative ${
                    settings.fullscreen ? 'bg-amber-600' : 'bg-amber-300'
                  }`}
                >
                  <div
                    className={`w-5 h-5 bg-white rounded-full absolute top-0.5 transition-transform ${
                      settings.fullscreen ? 'translate-x-6' : 'translate-x-0.5'
                    }`}
                  />
                </button>
              </div>

              {/* 显示网格 */}
              <div className="flex items-center justify-between">
                <label className="text-amber-800 font-medium flex items-center gap-2">
                  <Grid3X3 className="w-5 h-5" />
                  显示网格
                </label>
                <button
                  onClick={() => handleToggleSetting('showGrid')}
                  className={`w-12 h-6 rounded-full transition-colors relative ${
                    settings.showGrid ? 'bg-amber-600' : 'bg-amber-300'
                  }`}
                >
                  <div
                    className={`w-5 h-5 bg-white rounded-full absolute top-0.5 transition-transform ${
                      settings.showGrid ? 'translate-x-6' : 'translate-x-0.5'
                    }`}
                  />
                </button>
              </div>

              {/* 显示路径 */}
              <div className="flex items-center justify-between">
                <label className="text-amber-800 font-medium flex items-center gap-2">
                  <Route className="w-5 h-5" />
                  显示敌军路径
                </label>
                <button
                  onClick={() => handleToggleSetting('showPath')}
                  className={`w-12 h-6 rounded-full transition-colors relative ${
                    settings.showPath ? 'bg-amber-600' : 'bg-amber-300'
                  }`}
                >
                  <div
                    className={`w-5 h-5 bg-white rounded-full absolute top-0.5 transition-transform ${
                      settings.showPath ? 'translate-x-6' : 'translate-x-0.5'
                    }`}
                  />
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* 操作说明 */}
        <div className="mt-8 bg-gradient-to-br from-amber-100 to-amber-200 rounded-lg p-6 border-2 border-amber-600">
          <h2 className="text-2xl font-bold text-amber-900 mb-4">
            操作说明
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-amber-800">
            <div>
              <h3 className="font-bold mb-2">游戏控制</h3>
              <ul className="space-y-1 text-sm">
                <li>• ESC / 空格键：暂停/继续游戏</li>
                <li>• 1-7：快捷选择棋手单位</li>
                <li>• 鼠标左键：部署选中的单位</li>
                <li>• 鼠标右键：升级/出售单位</li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold mb-2">棋手单位</h3>
              <ul className="space-y-1 text-sm">
                <li>• 锐士(兵)：近战单位，过河后攻速提升</li>
                <li>• 神射(炮)：远程范围攻击，需要炮架</li>
                <li>• 骠骑(马)：突击攻击，马踏连营</li>
                <li>• 战车(车)：直线穿透攻击</li>
                <li>• 谋士(士)：减速光环效果</li>
                <li>• 丞相(相)：治疗和增益光环</li>
                <li>• 元帅(将)：终极单位，全面增益</li>
              </ul>
            </div>
          </div>
        </div>

        {/* 重置按钮 */}
        <div className="mt-8 text-center">
          <button
            onClick={() => {
              updateSettings({
                masterVolume: 0.8,
                sfxVolume: 0.7,
                musicVolume: 0.6,
                quality: 'high',
                fullscreen: false,
                showGrid: true,
                showPath: true
              });
            }}
            className="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
          >
            恢复默认设置
          </button>
        </div>
      </div>
    </div>
  );
}